<template>
  <div>
    <smart-table
      :formList="formList"
      :formData="formData"
      :title="title"
      :selectUrl="selectUrl"
      :updateUrl="updateUrl"
      :exportExcelUrl="exportUrl"
      :importExcelUrl="importUrl"
      :tableColumns="tableColumns"
      :formButtonCtl="formButtonCtl"
      :formRules="userFormRules"
      :insertUpdateMethodExtend="userUpdateMethodExtend">
    </smart-table>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  name: 'User',
  computed: {
    ...mapGetters(['id']),
  },
  data() {
    return {
      title: '用户',
      formList: [
        {
          title: '用户名',
          name: 'username',
          type: 'input',
        },
        {
          title: '角色',
          name: 'roleId',
          type: 'select',
          optionList: [],
          key: 'id',
          label: 'name',
          showValue: false,
        },
        {
          title: '状态',
          name: 'status',
          type: 'select',
          optionList: [],
          showValue: false,
        },
        {
          title: '性别',
          name: 'sex',
          type: 'select',
          optionList: [],
          showValue: false,
          hidden: {
            updateDialog: true,
          },
        },
      ],
      formData: {
        current: 1,
        size: 10,
      },
      selectUrl: 'user/lookUser',
      updateUrl: 'user/updateUser',
      exportUrl: '/userService/user/export',
      importUrl: '/userService/user/import',
      tableColumns: [
        {
          title: '头像',
          name: 'avatar',
          type: 'image',
        },
        {
          title: '用户名',
          name: 'username',
        },
        {
          title: '年龄',
          name: 'age',
          width: 90,
          suffix: '岁',
        },
        {
          title: '角色',
          name: 'roleName',
          filters: [],
          filterName: 'name',
        },
        {
          title: '性别',
          name: 'sex',
          type: 'tag',
          width: 90,
          tagStyle: {},
          tipMap: {},
          filters: [],
        },
        {
          title: '手机号',
          name: 'phone',
        },
        {
          title: 'QQ',
          name: 'qq',
        },
        {
          title: '微信',
          name: 'wechat',
        },
        {
          title: '邮箱',
          name: 'email',
        },
        {
          title: '地址',
          name: 'address',
        },
        {
          title: '状态',
          name: 'status',
          type: 'tag',
          width: 90,
          tagStyle: {},
          tipMap: {},
          filters: [],
        },
        {
          title: '创建时间',
          name: 'createTime',
        },
        {
          title: '修改时间',
          name: 'updateTime',
        },
      ],
      // 表单校验
      userFormRules: {
        username: [
          {
            required: true,
            message: '用户名不得为空!',
            trigger: 'blur',
          },
        ],
        roleId: [
          {
            required: true,
            message: '角色不得为空!',
            trigger: 'change',
          },
        ],
        status: [
          {
            required: true,
            message: '状态不得为空!',
            trigger: 'change',
          },
        ],
      },
      formButtonCtl: {
        insertButton: false,
        detailButton: false,
        deleteButton: false,
      },
      // 性别映射
      sexMap: {
        style: {
          0: 'danger',
          1: 'primary',
          2: 'info',
        },
        tip: {
          0: '女',
          1: '男',
          2: '保密',
        },
        filters: [
          { title: '女', name: 0 },
          { title: '男', name: 1 },
          { title: '保密', name: 2 },
        ],
      },
      // 状态映射
      statusMap: {
        style: {
          0: 'success',
          1: 'danger',
        },
        tip: {
          0: '正常',
          1: '冻结',
        },
        filters: [
          { title: '正常', name: 0 },
          { title: '冻结', name: 1 },
        ],
      },
    }
  },
  created() {
    this.addConfig()
    this.initRoleData()
  },
  methods: {
    // 合并属性
    addConfig() {
      // 下拉框数据注入
      this.$set(this.formList[3], 'optionList', this.sexMap.filters)
      // 下拉框数据注入
      this.$set(this.formList[2], 'optionList', this.statusMap.filters)
      // 表格筛选
      this.$set(this.tableColumns[4], 'filters', this.sexMap.filters)
      // 标签样式
      this.$set(this.tableColumns[4], 'tagStyle', this.sexMap.style)
      // 提示
      this.$set(this.tableColumns[4], 'tipMap', this.sexMap.tip)
      // 表格筛选
      this.$set(this.tableColumns[10], 'filters', this.statusMap.filters)
      // 标签样式
      this.$set(this.tableColumns[10], 'tagStyle', this.statusMap.style)
      // 提示
      this.$set(this.tableColumns[10], 'tipMap', this.statusMap.tip)
    },
    initRoleData() {
      this.$store.dispatch('role/lookRoleAll').then((response) => {
        this.formList[1].optionList = response.data
        this.tableColumns[3].filters = response.data
      })
    },
    //  本人账号不能修改
    userUpdateMethodExtend(data) {
      if (data.id === this.id) {
        throw new Error('不能修改自己的信息!')
      }
      return data
    },
  },
}
</script>

<style lang="scss" scoped>
.sub-el-icon {
  color: currentColor;
  width: 1em;
  height: 1em;
  overflow: hidden;
  fill: currentColor;
  margin-right: 5px;
}
</style>
